<template>
	<!-- #ifdef MP-WEIXIN -->
	<NavBar>
		<view></view>
	</NavBar>
	<!-- #endif -->
	<view class="warp">
		<view class="head">
			<up-icon name="bell" color="#606163" size="25" />
			<navigator url="/pages/personal/setup" style="padding: 30rpx;40rpx">
				<up-icon name="setting" color="#606163" size="25" />
			</navigator>
		</view>

		<view class="middle">

			<view class="avatar">
				<up-avatar :src="ImageUrl" size="60" />
				<view class="box">
					<text>{{userInfo.name}}</text>
					<text>{{userInfo.supplierName}}</text>
				</view>
			</view>

			<view class="" style="margin-top: 20rpx;">
				<up-card :full="true" :border="false" border-radius="0" :head-border-bottom="false">
					<template #head>
						<view class="title1" style="display: flex;justify-content: space-between;color: #747d8c;">
							<span>订单管理</span>
							<span @click="clickOrder">查看订单 ></span>
						</view>
					</template>

					<template #body>
						<up-grid :border="false" col="4" @click="click">
							<up-grid-item v-for="(item,index) in list" :key="index" class="grid">
								<up-badge type="error" max="99" :value="item.badgeNumbe" :offset="[-12,12]" :absolute="true" />
								<up-icon :name="item.name" :size="28" />
								<text class="grid-text" style="font-size: 24rpx;">{{item.title}}</text>
							</up-grid-item>
						</up-grid>
						<up-toast ref="uToastRef" />
					</template>
				</up-card>
			</view>

			<view class="" style="background-color:#ffffff;margin: 30rpx 0">
				<CellGroup :groupList='groupList1'></CellGroup>
			</view>
			<view class="" style="background-color:#ffffff;">
				<CellGroup :groupList='groupList2'></CellGroup>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import CellGroup from '@/components/CellGroup/index.vue'

	import NavBar from '@/components/Layout/navbar.vue';
	import ImageUrl from '../../static/image/1.jpg'
	import DfhImg from '../../static/image/待发货.png'
	import YwhImg from '../../static/image/已发货-物流详情.png'
	import YwcImg from '../../static/image/已完成.png'
	import BlImg from '../../static/image/补录单.png'
	import GysImg from '../../static/image/供应商.png'
	import XstjImg from '../../static/image/链接.png'
	import BzfkImg from '../../static/image/帮助.png'
	import MydImg from '../../static/image/满意度调查-红.png'
	import LxkfImg from '../../static/image/联系客服 (1).png'
	import Gyimg from '../../static/image/关于.png'
	const userInfo = ref({
		name: "测试",
		supplierName: "贵州森茂林业开发有限责任公司",
		ImageUrl: ImageUrl
	})







	// 宫格数据1  
	const list = reactive([{
			name: DfhImg,
			title: '待发货',
			badgeNumbe: 100
		},
		{
			name: YwhImg,
			title: '已发货',
			badgeNumbe: 33
		},
		{
			name: YwcImg,
			title: '已完成',
			badgeNumbe: 44
		},
		{
			name: BlImg,
			title: '补录单',
			badgeNumbe: 55
		},
	]);

	// 宫格数据2
	const groupList1 = ref(
		[{
				title: "供应商信息",
				icon: GysImg,
				url: "/pages/personal/supplier"
			},
			{
				title: "销售统计",
				icon: XstjImg
			}
		]
	)

	// 宫格数据3
	const groupList2 = ref(
		[{
				title: "帮助与反馈",
				icon: BzfkImg
			},
			{
				title: "满意度调查",
				icon: MydImg
			},
			{
				title: "联系客服",
				label: '工作时间 08:00-17:30',
				icon: LxkfImg
			},
			{
				title: "关于",
				icon: Gyimg
			}
		]
	)


	// 创建对子组件的引用  
	const uToastRef = ref(null);

	// 定义方法  
	const click = (name) => {
		console.log(name)
		if (uToastRef.value) {
			uToastRef.value.success(`点击了第${name + 1}个`); // 注意：这里加1是因为通常我们是从第1个开始计数的  
		}
	};

	// 查看订单
	const clickOrder = () => {
		uni.showToast({
			title: "点击了订单"
		})
	}
</script>
<style lang="scss" scoped>
	.warp {
		border: 1rpx solid yellow;


		.head {

			border: 1rpx solid red;
			display: flex;
			justify-content: flex-end;
		}

		.middle {
			border: 1rpx solid green;
			margin: 0 20rpx 0 20rpx;

			.avatar {
				display: flex;

				.box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 10rpx;

					text:nth-child(1) {
						margin-bottom: 10rpx;
					}
				}

			}
		}

	}
</style>